<template>
	<page-frame logo="/static/images/data_title.png">
		<template #top>
			<view style="width: 158px;margin-left: 16px;">
				<u-search height="56rpx" :placeholder="`已上传 ${page.count} 份资料`" :showAction="false" bgColor="#ffffff"
					v-model="page.params.keyWord" @search="search" @change="search" @clear="clear" @custom="search"></u-search>
			</view>
		</template>
		<template #sticky>
			<view class="sticky-box">
				<up-scroll-list :indicator="false">
					<search-btn :name="page.params.parentId ? page.params.parentName : '类别'" @search="searchBtnClick({
							name: '类别',
							type: 'F'
						})" :active="page.params.parentId ? true:false "></search-btn>

					<search-btn :name="page.params.moduleId ? page.params.moduleName : '专题'" @search="searchBtnClick({
							name: '专题',
							type: 'M'
						})" :active="page.params.moduleId ? true:false "></search-btn>

					<search-btn :name="page.params.industryId ? page.params.industryName : '行业'" @search="searchBtnClick({
							name: '行业',
							type: 'I'
						})" :active="page.params.industryId ? true:false "></search-btn>

					<search-btn :name="page.params.format ? page.params.formatName : '格式'" @search="searchBtnClick({
							name: '格式',
							type: 'G'
						})" :active="page.params.format ? true:false "></search-btn>

					<search-btn :name="page.params.priceSection ? page.params.priceSectionName : '价格'" @search="searchBtnClick({
							name: '价格',
							type: 'P'
						})" :active="page.params.priceSection ? true:false "></search-btn>
				</up-scroll-list>
				<!-- <view class="top-tip">
					已上传<text class="f-w-b u-p-l-6 u-p-r-6">{{ page.count }}</text>份资料
				</view> -->
			</view>
		</template>
		<template #area>
			<file-card v-for="data in page.list" :key="data.id" :data="data" />
			<view class="u-p-t-12" v-if="page.total > page.params.pageSize">
				<u-loadmore line :fontSize="12" :status="page.loadStatus" nomoreText="更多精彩，敬请关注" />
			</view>
		</template>
	</page-frame>


	<u-popup :show="popShow" @close="popShow = false" :round="24"  :safeAreaInsetBottom="false">
		<view class="pop-box">
			<view @click="popShow = false" class="close-icon">
				<up-icon name="close-circle-fill" color="#ccc" size="22"></up-icon>
			</view>
			<view class="text-center f-w-b f-s-18">{{ popData.name }}</view>
			<view class="box-area">
				<block v-if="popData.type == 'F'">
					<view class="item-tag" v-for="(field,index) in fieldList" :key="index"
						:class="{ 'active' : field.value == page.params.parentId }"
						@click="selectTag(field,'parentId','parentName')">
						{{ field.name }}
					</view>
				</block>

				<block v-if="popData.type == 'M'">
					<view class="item-tag" v-for="(m,index) in moduleList" :key="index"
						:class="{ 'active' : m.value == page.params.moduleId }"
						@click="selectTag(m,'moduleId','moduleName')">
						{{ m.name }}
					</view>
				</block>

				<block v-if="popData.type == 'I'">
					<view v-for="(industry,index) in industryList" :key="index" class="item-tag"
						:class="{ 'active' : industry.value == page.params.industryId }"
						@click="selectTag(industry,'industryId','industryName')">
						{{ industry.name }}
					</view>
				</block>

				<block v-if="popData.type == 'G'">
					<view class="item-tag" v-for="(format,index) in config.appInfo.formatAround" :key="index"
						:class="{ 'active' : format.value == page.params.format }"
						@click="selectTag(format,'format','formatName')">
						{{ format.name }}
					</view>
				</block>

				<block v-if="popData.type == 'P'">
					<view class="item-tag" v-for="(price,index) in config.appInfo.profilePriceAround" :key="index"
						:class="{ 'active' : price.value == page.params.priceSection }"
						@click="selectTag(price,'priceSection','priceSectionName')">
						{{ price.name }}
					</view>
				</block>
			</view>
		</view>
	</u-popup>


</template>

<script setup>
	import PageFrame from "@/components/PageFrame.vue"
	import fileCard from '@/components/file-card.vue'
	import dataCard from '@/components/data_card.vue'
	import tagBtn from '@/components/common/tag-btn.vue'
	import searchBtn from "@/components/search-btn.vue"
	import config from '@/config.js'
	import {
		ref
	} from 'vue'
	import {
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		list
	} from '@/api/data.js'
	import {
		getModuleList,
		getParentFieldList,
		getIndustryList
	} from '@/api/config'
	const popShow = ref(false)
	// 弹窗的信息
	const popData = ref({})
	const fieldList = ref([])
	const moduleList = ref([])
	// 行业数组
	const industryList = ref([])

	const page = ref({
		list: [],
		params: {
			keyWord: '',
			moduleId: '',
			moduleName: '',
			parentId: '',
			parentName: '',
			industryId: '',
			industryName: '',
			priceSection: '',
			priceSectionName: '',
			format: '',
			formatName: '',
			pageNum: 1,
			pageSize: 8
		},
		loadStatus: 'nomore',
		// 当前页
		currentPage: 1,
		// 总页数
		pages: 1,
		// 总条数
		total: 0,
		// 总份数
		count: 0
	})

	getList()
	getIndustry()
	module()
	parentField()


	onReachBottom(() => {
		if (page.value.currentPage == page.value.pages) {
			page.value.loadStatus = 'nomore'
			return
		}
		page.value.params.pageNum++
		uni.$u.sleep(200).then(() => {
			getList()
		})
	})

	/**
	 * 查询条件点击事件
	 */
	function searchBtnClick(e) {
		popData.value = e
		popShow.value = true
	}


	/**
	 * 查询方法
	 */
	function search() {
		page.value.params.pageNum = 1
		uni.pageScrollTo({
			scrollTop: 1,
			duration: 0
		})
		getList()
	}
	/**
	 * 清除搜索条件
	 */
	function clear() {
		page.value.params.keyWord = ''
		search()
	}

	/**
	 * 父级领域
	 */
	function parentField() {
		getParentFieldList('F').then(resp => {
			const list = resp.data.map(f => {
				return {
					value: f.id,
					name: f.name
				}
			})
			fieldList.value = [{
					value: '',
					name: '不限'
				},
				...list,
			]
		})
	}

	/**
	 * 行业分类
	 */
	function getIndustry() {
		getIndustryList().then(resp => {
			industryList.value = [{
				value: '',
				name: '不限'
			}].concat(resp.data.map(i => {
				return {
					value: i.id,
					name: i.name
				}
			}))
		})
	}

	function module() {
		getModuleList().then(resp => {
			moduleList.value = [{
					value: '',
					name: '不限'
				},
				...resp.data.map(f => {
					return {
						value: f.id,
						name: f.name
					}
				})
			]
		})
	}

	/**
	 * 获取列表
	 */
	function getList() {
		page.value.loadStatus = "loading"
		list(page.value.params).then(resp => {
			const total = resp.total
			if(page.value.count === 0){
				page.value.count = total
			}
			if (resp.currentPage === 1) {
				page.value.list = []
			}
			page.value.list = [...page.value.list, ...resp.rows]
			page.value.currentPage = resp.currentPage
			page.value.pages = resp.pages
			page.value.total = resp.total
			popShow.value = false
			if (resp.currentPage == resp.pages) {
				page.value.loadStatus = "nomore"
				return
			}
			page.value.loadStatus = "loadmore"


		})
	}

	function selectTag({
		value,
		name
	}, key, _key) {
		page.value.params[key] = value
		page.value.params[_key] = name
		popShow.value = false
		search()
	}

	onShareAppMessage(() => {
		return {
			title: '尧君智库-资料',
		}

	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-资料'
		}
	})
</script>

<style lang="scss" scoped>
	// 强制修改页面背景
	page {
		background-color: #fff !important; // 设置背景颜色为白色，可以根据需要修改为其他颜色
	}

	::v-deep .u-scroll-list {
		padding-bottom: 0rpx !important;
	}

	.sticky-box {
		.top {
			padding: 15px 0 12px;
		}
	}

	.seach-btn {
		border-radius: 8px;
		background-color: #eee;
		padding: 6px 8px;
	}

	.pop-box {
		position: relative;
		padding: 15px 12px;
		
		.close-icon {
			position: absolute;
			top: 16px;
			right: 18px;
		}

		.box-area {
			max-height: 300px;
			overflow-y: scroll;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 12px;
			margin: 20px 6px;

			.item-tag {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 74rpx;
				line-height: 74rpx;
				background-color: #F4F6F8;
				color: #686A6B;
				font-size: 28rpx;
				border-radius: 8rpx;
			}
			
			.active {
				background: linear-gradient(to right, #5E9EE1, #457EE6);
				color: #fff;
			}
		}

	}

	.search-tag {
		border-radius: 4px;
		padding: 6px 10px;
		font-size: 12px;
		background-color: #fff;
		color: #606266;
		margin-right: 12px;
		border: 1rpx solid #fff;

		._name {
			width: max-content;
		}
	}

	.search-tag-active {
		color: #033FFF;
		border: 1rpx solid #033FFF;
	}
	
	::v-deep .u-search__content__input {
		font-size: 12px !important;
	}
</style>